//@ts-nocheck
/*
状态是自己内部的,改变状态唯一的方式就是setState
但可以
this.state.number = this.state.number + 1;
this.forceUpdate();
*/
import React from 'react';
import ReactDOM from 'react-dom';

interface Props {

}

interface State {
  number: number;
}

class Clock extends React.Component<Props, State> {
  timerID: number | null = null;

  // timerID: any;

  constructor(props: Props) {
    super(props);
    this.state = {
      number: 0
    }
  }
  // 也可以不用构造函数 而是↓这样 es7写法 也是给实例赋值
  // state = { number: 0 }

  qiangzhigengxin = () => {
    console.log('123');
    //@ts-ignore
    this.state.number = 1001; //直接通过this.state的话 的确也会改变状态的值 但是不会导致视图刷新
    this.forceUpdate(); //so 你可以调用forceUpdate
  };

  componentDidMount() {
    // @ts-ignore
    this.timerID = setInterval(() => {
      console.log('timer 执行一次')

      // this.setState({number: this.state.number + 1})

      // this.setState({}); /** 会导致刷新, 查看控制台 会打印下面 componentWillUpdate里打印的'准备刷新'*/
      //this.setState(this.state); /** 即使是相同的对象 也会导致刷新*/
      this.setState(null); /** 不会导致刷新, 查看控制台 不会打印下面 componentWillUpdate里打印的'准备刷新*/
      //↑ 综上只要不是==undefined的, 只要不是一个对象(哪怕是一个空对象), 这里都不会触发更新

    }, 1000);
  }

  componentWillUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any) {
    console.log('准备刷新')
  }

  componentWillUnmount() {
    clearInterval(this.timerID!);
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.qiangzhigengxin}>强制更新</button>
      </div>
    );
  }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));
